<template>
	<div class="home-list">
		<div class="home-list-row" v-for="(item, index) in listData" :key="index">
       	 	<div class="home-list-col" 
				@click="gotoCategory(list)"
				:style="{ flex: '0 0 ' + (100 / col) + '%' }"
				v-for="(list, listIndex) in item" 
				:key="listIndex">
					<div class="col-icon">
						<van-icon class="col-icon-img" name="gift-o" />
					</div>
					<div class="col-name">{{list.name}}</div>
				</div>
		</div>
	</div>
</template>
<script>
  export default {
     props: {
		categoryList: {
			type: Array
		},
		row: {
			type: Number,
			default: 0
		},
		col: {
			type: Number,
			default: 1
		},
    },
    data(){
		return{

		}
    },
    mounted(){
      	console.log(this.categoryList);
	},
	methods:{
		gotoCategory(item){
			console.log(item);
		}
	},
	computed: {
      listData() {
        if (this.categoryList && this.categoryList.length > 0) {
          const number = this.row * this.col
          const _listData = this.categoryList.slice(0, number)
          const _listDataByRow = []
          let _row = 0
          while (_row < this.row) {
            _listDataByRow.push(_listData.slice(_row * this.col, _row * this.col + this.col))
            _row++
          }
          return _listDataByRow
        } else {
          return []
        }
      }
    },
  }
</script>
<style lang="scss" scoped>
	.home-list{
		width:100%;
		padding:15px 0; 
		.home-list-row{
			margin-bottom:10px;
			display: flex;
        	flex-flow: row nowrap;
			.home-list-col{
				width: 100%;
				display: flex;
				flex-direction:column;
				align-items: center;
				.col-icon{
					width:50px;
					height:50px;
					text-align: center;
					border-radius: 50%;
					background:#f0932b;
					display: flex;
					flex-direction: row;  /* 子元素横向排列 */
					justify-content: center; /* 相对父元素水平居中 */
					align-items: center; /*  子元素相对父元素垂直居中 */
					.col-icon-img{
						color:white;
						flex-grow:1;
						font-size:16px;
					}
				}
				.col-name{
					margin-top:10px;
					text-align:center;
					font-size:12px;
					color:#303133;
				}
			}
		}
	}
</style>